<!DOCTYPE html>
<html lang="en">
<head>
   <base href="__ROOT__">
    <meta charset="UTF-8">
    <title>{$v['name']} 的代言分享</title>
    <script src="/public/webapp/js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/public/webapp/js/jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/public/webapp/js/vwp.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'wx7440c4b3bc2b9002', // 必填，公众号的唯一标识
        timestamp: '<?php echo $time ?>',
        nonceStr:  '<?php echo $noncestr ?>',
        signature: '<?php echo $signature ?>',
        jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
    });
    wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title: '曼申智能锁代言', // 分享标题
            link: '<?php echo $url ?>', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://www.caizhanzhushou.com/data/upload/default/20170815/5992871c9dc5a.jpg', // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
        //分享给朋友
        wx.onMenuShareAppMessage({
            title:'曼申智能锁代言', // 分享标题
            desc: '我正在为曼申智能锁代言！',// 分享描述
            link: '<?php echo $url ?>', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://www.caizhanzhushou.com/data/upload/default/20170815/5992871c9dc5a.jpg', // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
    });
    wx.error(function(res){
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });

</script>
  <style>
      #qrcode canvas{
          display: none;
      }
      .bg{
         position: absolute;
          top: 0;left: 0;
          width: 100%;
          z-index: -1;
      }
      .bg img{
          display: block;
          width: 100%;
      }
      #qrcode{
          position: absolute;
          width: 40%;
          left: 30%;
          font-size: 0.5rem;
          text-align: center;
      }
      div.mk{
          padding: 5%;
          background-color: #fff;
      }
      #qrcode p{
          color: #fff;
          margin: 0.1rem auto;
          margin-top: 0.2rem;
      }
      #qrcode img{display: block;width: 100%;}
      .headimg{
          position: absolute;
          left: 0;
          width: 100%;
      }
      .headimg p{
          font-size: 40%;
          margin: 0;
          color: #fff;
          text-align: center;
      }
      .headimg .warp{
          width: 2rem;
          height: 2rem;
          padding: 0.1rem;
          border-radius: 50%;
          overflow: hidden;
          background-color: rgba(255,255,255,0.2);
          margin: 0 auto;
      }
      .headimg img{
          display: block;
          width: 100%;
          border-radius: 50%;
          overflow: hidden;
      }
  </style>
  <div class="bg">
      <img src="/public/webapp/img/szbg.jpg" alt="">
  </div>
  <if condition="$v['headimg'] neq NULL">
  <div class="headimg">
      <div class="warp">
          <img src="{$v['headimg']}" alt="">
      </div>
      <p>我是 {$v['name']}</p>
  </div>
  </if>
   <div id="qrcode">
   <div class="mk">
   <img src="" alt="" id="erweiimg">
   </div>
   <p>免费送智能锁</p>
   <!--<img src="/public/webapp/img/erwei.png" alt="">-->
   </div>
    <script>
//         从 canvas 提取图片 image  
        function convertCanvasToImage(canvas) {  
            //新Image对象，可以理解为DOM  
            var image = $("#erweiimg")[0];  
            // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持  
            // 指定格式 PNG  
            image.src = canvas.toDataURL("image/png");  
            return image;  
        }  
        var log="http://www.caizhanzhushou.com/index.php?g=Wechat&m=Webapp&a=lock";
        jQuery('#qrcode').qrcode({
            render:"canvas",
            text:log
        });
        setTimeout(function(){
            convertCanvasToImage($("#qrcode canvas")[0]);
        },100);
        $(window).on("resize",function(e){
            e.stopPropagation();
           var eweibt= 320/$(window).width()*110;
           var headbt= 320/$(window).width()*35;
            $("#qrcode").css("bottom",eweibt);
            $(".headimg").css("top",headbt);
        });
        $(window).trigger("resize");
    </script>
</body>
</html>